<template>
	<view class="container">
		<!-- <view class="header">
			<text class="title">镇北盲盒</text>
		</view> -->
		<view class="carousel">
			<img src="../../static/manghe/bgColor.png" alt="" />
		</view>
		<view class="tab-bar">
			<view class="tab" :class="{ 'active': activeTab === 'overview' }" @click="selectTab('overview')">
				<text>盲盒列表</text>
				<view class="line" v-if="activeTab === 'overview'">
				</view>
			</view>
			<view class="tab" :class="{ 'active': activeTab === 'listview' }" @click="selectTab('listview')">
				<text>奖品全览</text>
				<view class="line" v-if="activeTab === 'listview'">
				</view>
			</view>
			<view class="tab" :class="{ 'active': activeTab === 'records' }" @click="selectTab('records')">
				<text>中奖记录</text>
				<view class="line" v-if="activeTab === 'records'">
				</view>
			</view>
		</view>
		<view v-if="activeTab === 'overview'" class="prize-list">
			<view v-for="(item, index) in peopleList" :key="index" class="prize-item">
				<view class="tip">
					<text v-if="item.isOpen == true">{{ item.grandPrize }}</text>
				</view>
				<img :src="item.isOpen ? item.detailImages : '../../static/manghe/questionMark.png'"
					mode="aspectFill"></img>
				<text>{{ item.isOpen ? item.name : '超多人气爆款神秘礼物等你来！' }}</text>
				<p>{{ item.isOpen ? "概率：" + item.probability + "%" : "超高几率抽到大奖" }}</p>
				<!-- <button class="button" @click="openPrize(item)" v-if="item.isOpen == false">点击开赏</button> -->
				<!-- 	<p v-if="item.id==1">零售价：{{list.price}}镇北币</p> -->
				<text v-if="item.isOpen == true" class="price">零售价：{{ item.moneyPrice }}</text>
			</view>
		</view>
		<view class="prize-overview-content-bottom" v-if="activeTab === 'listview' && adminList.length != 0">
			<view class="content" v-for="(item, index) in adminList" :key="index" @click="godetail(item.id)">
				<image :src="item.detailImages" mode="aspectFill">
					<text class="name">{{ item.name }}</text>
					<view class="grade">
						<text>{{ item.grandPrize }}</text>
					</view>
			</view>
		</view>
		<view class="action" v-if="activeTab === 'overview'">
			<view @click="open(1)" class="button">抽一发</view>
			<view @click="open(5)" class="button">抽五发</view>
			<view @click="open('all')" class="button">整盒端</view>
		</view>
		<view v-if="activeTab === 'records'" class="records">
			<img v-if="BoxRecordByDay.length == 0" class="records-img" src="../../static/manghe/null.png" alt="" />
			<view class="records-text" v-if="BoxRecordByDay.length == 0">暂无中奖记录</view>
			<view class="recordsItem" v-for="(item, index) in BoxRecordByDay">
				<img class="box-image-g" :src="item.image" alt="" mode="aspectFill"
					@click="previewImage(item.image, index)" />
				<view class="cont">
					<text class="skuName">{{ item.skuName }}</text>
					<p class="winTime">{{ item.winTime }}</p>
				</view>
				<img class="head" :src="item.userAvatar" alt="" />
				<view class="usercont">
					<text>{{ item.username }}</text>
				</view>
				<view class="tip">
					<text>{{ item.level }}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay">
				<h3>{{ list.name }}</h3>
				<view class="price">
					<text>单价：</text>
					<text>{{ list.price }}镇北币</text>
				</view>
				<view class="num">
					<text>数量：</text>
					<text>购{{ num }}盒</text>
				</view>
				<view class="num">
					<view>
						<checkbox color="#6C40FF" :class="{ disabled: isIntegralDisabled }"
							:disabled="isIntegralDisabled" :checked="shouldCheckPayment" @click="updateShouldCheck()"
							background-color="#fff" border-color="#6C40FF" activeBackgroundColor="#fff"
							activeBorderColor="#6C40FF" />
						<text>积分：</text>
					</view>
					<text>{{ integral }}积分</text>
				</view>
				<view class="list-item">
					<view class="body">
						<!-- 优惠券 -->
						红包可用
					</view>
					<view class="arrow-right bold" :class="{ disabled: shouldCheckPayment }" v-if="currentCoupon.id"
						@tap="couponsVisible = true">
						<text class="meta red">- ¥{{ currentCoupon.discountMoney }}</text>
						<text class="new-iconfont icon-arrow-right"></text>
					</view>
					<view class="arrow-right" :class="{ disabled: shouldCheckPayment }" v-else
						@tap="couponsVisible = true">
						<text class="meta" v-if="usableCoupons.length">{{ usableCoupons.length }}张可用</text>
						<text class="meta" v-else>无可用</text>
						<text class="new-iconfont icon-arrow-right"></text>
					</view>
				</view>
				<view class="sunList">
					<view class="sums">
						<text></text>
						<text v-if="integralNum">积分扣除：-{{ integralNum }}</text>
					</view>
					<view class="sum">
						<text></text>
						<text>小计：{{ totalprice }}镇北币</text>
					</view>
				</view>

				<view class="skip">
					<text>
						<checkbox :checked="skipAnimation" @click="skipCheck()" color="#6C40FF" background-color="#fff"
							border-color="#6C40FF" activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
						<span>跳过动画</span>
					</text>
				</view>
				<view class="agree">
					<text>
						<checkbox color="#6C40FF" :checked="checkPayMent" @click="updateCheck()" background-color="#fff"
							border-color="#6C40FF" activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
					</text>
					我已阅读并同意<u @click="goRule()">《镇北魔盒盲盒须知》</u>
				</view>
				<button :disabled="isSubmitting" class="button" @click="payment">
					确认购买
				</button>
			</view>
		</uni-popup>
		<!-- 盲盒详情 -->
		<uni-popup ref="details" type="bottom">
			<view class="pay" v-if="goodsList.length">
				<view class="prices">
					<img class="image-price" :src="goodsList[0].detailImages" alt="" mode="aspectFill" />
					<view class="content">
						<view>
							奖品名称:{{ goodsList[0].name }}
						</view>
						<view>
							奖品价格:{{ goodsList[0].moneyPrice }}
						</view>
					</view>
				</view>
				<view v-html="goodsList[0].description" class="particulars"></view>
			</view>
		</uni-popup>
		<UsableCouponPopup v-if="couponsVisible" :unusableCoupons="unusableCoupons" :usableCoupons="usableCoupons"
			:currentCoupon="currentCoupon" :totalprice="totalprice" @change="couponChange"
			@close="couponsVisible = false">
		</UsableCouponPopup>
	</view>
</template>

<script>
import {
	peopleDetails,
	pay,
	peopleCj,
	skuLevel,
	userAssert,
	getBoxRecordByDay
} from "@/api/blind.js";
import {
	$getStorage,
	$setStorage,
	$removeStorage
} from "@/utils/auth.js";
export default {
	data() {
		return {
			activeTab: 'listview',
			activeRoom: 0,
			peopleList: [],
			// 用于保存勾选状态的数组，初始都是未勾选
			selectedItems: [],
			hasSelectedItems: false, // 用于表示是否有选中的多选框
			// 选中盒子之后的单个盒子的详情
			items: "",
			// 选中盒子之后的第几个盒子
			indexs: "",
			list: "",
			boxId: '',
			// 中奖记录数据
			BoxRecordByDay: [],
			// 抽几发
			num: null,
			adminList: [],
			// 还剩下多少个盒子可以抽
			boxNumber: null,
			items: [],
			// 红包信息
			couponsVisible: false,
			unusableCoupons: [],
			usableCoupons: [],
			currentCoupon: {},
			totalprice: null,
			// 用户协议选中
			checkPayMent: false,
			page: 1,
			perPage: 10,
			goodsList: [],
			skipAnimation: false,
			// 积分
			integral: {},
			integralCheck: false,
			integralNum: 0,
			isIntegralDisabled: false,
			// 支付按钮
			isSubmitting: false // 控制按钮是否禁用
		}
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo
		},
		shouldCheckPayment() {
			// 根据积分余额决定多选框是否选中
			return this.integral > 0 && this.integralCheck;
		},
	},
	// 监听积分选择变化
	watch: {
		integralCheck(newVal) {
			// 当多选框状态改变时重新计算总价
			// this.open(this.num);
		},
	},
	async onLoad(e) {
		this.boxId = e.boxId

	},
	onShow() {
		// this.getboxList();
		this.getskuLevel(this.getboxList);
		// this.getBoxRecordByDay() 
		this.skipAnimation = $getStorage('skipAnimation') == false ? false : true;   // 跳过动画 
		console.log(this.skipAnimation)
	},
	async onReachBottom() {
		this.page++;
		const res = await this.getBoxRecordByDay();
		this.BoxRecordByDay.push(...res.data.list);
	},
	methods: {
		// 积分选择框逻辑
		updateShouldCheck() {
			this.integralCheck = !this.integralCheck;
			this.open(this.num, true);
		},
		// 查看奖品详情
		godetail(id) {
			this.$refs.details.open('bootom')
			this.$http('/new/box/particulars', "get", {
				type: 1,
				id: id
			}).then(res => {

				this.goodsList = res.data
			})
		},
		previewImage(urls, index) {
			uni.previewImage({
				urls: [urls],
				current: index
			})
		},
		async getskuLevel(cd) {
			await skuLevel({
				boxId: this.boxId,
				type: 1,
				roomId: 1
			}).then(res => {
				this.items = res.data;
				cd & cd()
			})
		},
		// 盲盒规则
		goRule() {
			uni.navigateTo({
				url: "/pages/rule/rule/rule?id=2"
			})
		},
		// 个人赏盒子列表接口
		getboxList() {
			let _this = this
			// 盲盒列表
			peopleDetails({
				boxId: _this.boxId
			}).then(res => {
				if (res.code == 200) {
					_this.peopleList = res.data.userVo.boxSkuVo
					_this.list = res.data.userVo
					_this.adminList = res.data.adminVo.boxSkuVo
					_this.boxNumber = res.data.num
					_this.peopleList.map(item => {
						if (item.id != 0) {
							item.isOpen = true
							return
						} else {
							item.isOpen = false
						}
					})
					_this.totalprice = (_this.list.price * _this.num).toFixed(2)

					_this.peopleList.forEach(item => {
						// const grand = _this.items.find(items=> items.level == item.grandPrize)
						const grands = _this.items.find(items => items.id == item.id)
						grands ? item.grandPrize = grands.name : null
						grands ? item.probability = grands.probability : null
					})
					// 奖品全揽等级渲染
					_this.adminList.forEach(item => {
						const grands = _this.items.find(items => items.id == item.id)
						grands ? item.grandPrize = grands.name : null
					})
				} else if (res.data == 201) {
					this.getboxList();
				} else {
					uni.showModal({
						title: '温馨提示',
						content: res.message,
						success: function (res) {
							if (res.confirm) {
								console.log('点击了确认')
							} else {
								console.log('点击了取消')
							}
						}
					})

				}
			})
		},
		// 个人赏中奖记录
		async getBoxRecordByDay() {
			return await getBoxRecordByDay({
				activityName: "个人赏",
				page: this.page,
				perPage: this.perPage,
				userId: this.userInfo.id,
				boxId: this.boxId
			});
		},
		// getBoxRecordByDay() {
		// 	this.$http("/box-record/getBoxRecordByDay", "get", {
		// 		activityName: "个人赏"
		// 	}).then(res => {
		// 		this.BoxRecordByDay = res.data.list
		// 		this.BoxRecordByDay.forEach(item=>{
		// 			const Record = this.items.find(items=> items.level == item.level)
		// 			return item.level = Record.name
		// 		})
		// 	})
		// },
		// 用户协议选中
		updateCheck() {
			this.checkPayMent = !this.checkPayMent
		},
		skipCheck() {
			this.skipAnimation = !this.skipAnimation
			this.$nextTick(() => {
				$setStorage("skipAnimation", this.skipAnimation);
			})
		},
		async selectTab(tab) {
			this.activeTab = tab;
			if (this.activeTab == "records") {
				const res = await this.getBoxRecordByDay();
				this.BoxRecordByDay.push(...res.data.list);
				this.BoxRecordByDay.forEach(item => {
					const Record = this.items.find(items => items.level == item.level)
					return item.level = Record.name
				})
			}
		},
		handleCheckboxChange(index) {
			this.peopleList[index].selected = !this.peopleList[index].selected;
			console.log(index);
			// 检查是否至少有一个多选框被选中
			this.hasSelectedItems = this.peopleList.some(item => item.selected);
			console.log(this.hasSelectedItems);
			if (this.hasSelectedItems) {
				this.indexs = index + 1
			}
		},
		// 确认购买
		payment() {
			if (this.num > this.boxNumber) {
				uni.showToast({
					title: "剩余盒子数量不足",
					icon: 'none',
					duration: 4000,
				});
				return false;
			}
			// 用户协议勾选校验
			if (!this.checkPayMent) {
				uni.showToast({
					title: "请阅读后勾选镇北魔盒盲盒须知再支付",
					icon: 'none',
					duration: 2000,
				});
				return
			}
			let ment = {
				totalMoney: this.list.price * this.num,
				couponsId: this.currentCoupon.id ? this.currentCoupon.id : "",
				payMoney: this.totalprice,
				activiteType: 1,
				integral: this.integralNum,
				payType: 1
			}
			if (this.isSubmitting) return; // 如果已经在提交中，直接返回
			this.isSubmitting = true; // 设置按钮为禁用状态
			uni.showLoading({
				title: '正在支付中...'
			})
			this.$http("/new/box/checkStock", "get", {
				boxId: this.boxId,
				type: 1,
				num: this.num,

			}).then(res => {
				if (res.code == 200) {
					pay(ment).then((res) => {
						if (res.code == 200) {
							// 关闭确认支付的弹框
							this.$refs.popup.close()
							this.isSubmitting = false;
							uni.hideLoading()
							$setStorage('adminList', JSON.stringify(this.adminList));
							uni.showToast({
								title: "支付成功",
								icon: 'none',
								duration: 4000,
							});
							let code = res.message
							let that = this
							// 延时跳转到抽奖页面
							setTimeout(function () {
								uni.navigateTo({
									url: '/pages/blind/index2/index2?code=' + code + "&msg=" + 1 +
										"&boxId=" + that.boxId + "&num=" + that.num
								});
							}, 2000);
						} else if (res.code == 500) {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 4000,
							});
							setTimeout(function () {
								uni.navigateTo({
									url: '/pages/myRedpack/index'
								});
							}, 2000);
						}
					})

				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
					});
				}
			})

		},
		changeRoom(index) {
			this.activeRoom = index;
		},
		choose() {
			uni.showModal({
				title: '有确认取消的弹窗',
				content: '确认要删除该项吗？',
				success: function (res) {
					if (res.confirm) {
						console.log('点击了确认')
					} else {
						console.log('点击了取消')
					}
				}
			})
		},
		// 红包点击立即使用的方法
		couponChange(e) {
			if (e.id === this.currentCoupon.id) {
				// 再次点击取消使用优惠券  // 暂时关闭此功能
				this.currentCoupon = {}
				this.getboxList();
				this.isIntegralDisabled = false
			} else {
				this.currentCoupon = e
				this.isIntegralDisabled = true
				if (this.totalprice - this.currentCoupon.discountMoney < 0) {
					this.totalprice = 0
				} else {
					this.totalprice = this.totalprice - this.currentCoupon.discountMoney
				}
			}
		},
		open(num, fromCheckbox = false) {
			this.isIntegralDisabled = false
			if (num == 'all') {
				this.num = this.boxNumber
				this.$refs.popup.open('bottom')
			} else {
				this.num = num
				this.$refs.popup.open('bottom')
			}
			this.currentCoupon = {}
			// type:1代表消费盲盒，接口是查询余额接口
			userAssert({
				type: 1
			}).then((res) => {
				this.Coin = res.data || {}
				this.unusableCoupons = res.data.unableCoupons || []
				this.usableCoupons = res.data.availableCoupons || []
				this.integral = res.data.integral.balance || 0
				if (!fromCheckbox) {
					this.integralCheck = this.integral > 0; // 根据积分余额设置选中状态
				}
				this.totalprice = (this.list.price * this.num).toFixed(2)
				if (this.integralCheck) {
					if ((this.integral / 100) > this.totalprice) {
						this.integralNum = this.totalprice * 100
						this.totalprice = 0
					} else {
						this.integralNum = this.integral
						this.totalprice = (this.totalprice - (this.integral / 100)).toFixed(2)
					}
				} else {
					this.integralNum = 0
					this.totalprice = (this.list.price * this.num).toFixed(2)
				}
			})
		},
		drawOne() {
			// 抽取一次盲盒逻辑...
		},
		drawFive() {
			// 抽取五次盲盒逻辑...
		},
		drawTen() {
			// 抽取十次盲盒逻辑...
		},
		openPrize(prize) {
			prize.isOpen = true;
		}
	}
}
</script>
<style scoped lang="scss">
page {
	background: linear-gradient(rgb(26, 14, 66), rgb(9, 9, 24), rgb(33, 54, 67), rgb(9, 9, 24));
}

.disabled {
	opacity: 0.5;
	/* 半透明效果 */
	cursor: not-allowed;
	/* 更改鼠标指针 */
	pointer-events: none;
	/* 阻止所有交互 */
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	background: linear-gradient(rgb(26, 14, 66), rgb(9, 9, 24), rgb(33, 54, 67), rgb(9, 9, 24));
	// padding-bottom: 250rpx;
}

.prize-overview-content-bottom {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 20rpx;
	margin-bottom: 130rpx;

	.content {
		width: 48%;
		height: 320rpx;
		background-image: url('https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/61211715153958734.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		position: relative;

		.grade {
			position: absolute;
			background-image: url(../../static/manghe/mark.png);
			background-size: contain;
			background-repeat: no-repeat;
			width: 110rpx;
			left: 0;
			top: 0;

			text {
				color: #fff;
				font-size: 25rpx;
				font-weight: 900;
				margin-left: 15rpx;
				display: block;
			}
		}

		image {
			width: 80%;
			height: 200rpx;

		}

		.name {
			width: 50%;
			color: white;
			text-align: center;
			margin-top: 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 23rpx;
		}
	}

}

.pay {
	width: 100%;
	height: 800rpx;
	background-color: #fff;
	border-radius: 50rpx 50rpx 0 0;
	padding: 30rpx 0;
	overflow: auto;

	.prices {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;

		.content {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
	}

	.image-price {
		width: 220rpx;
		height: 220rpx;
	}

	h3 {
		margin: 30rpx 0 50rpx;
		text-align: center;
		color: #000;
	}

	.price {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;

		text:nth-child(2) {
			font-weight: 900;
		}
	}

	.num {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;
	}

	.list-item {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 10px;
	}

	.list-item .body {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.list-item-title {
		flex: 1;
	}

	.meta {
		font-size: 35rpx;
	}

	.redPack {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;

		text:nth-child(2) {
			font-weight: 900;
			display: flex;
			align-items: center;
			height: 100%;
		}
	}

	.sunList {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.sum {

			box-sizing: border-box;
			padding: 0 20rpx;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				background: #6C40FF;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.sums {
			box-sizing: border-box;
			padding: 0 20rpx;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				background: red;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.agree {
		color: #000;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			transform: scale(0.6);
			display: block;
		}

		u {
			color: #6C40FF;
		}
	}

	.skip {
		margin: 0 -70rpx;

		text {
			transform: scale(0.8);
			display: block;
			font-size: 36rpx;
			display: flex;
			align-items: center;

			span {
				margin-left: 16rpx;
				line-height: 40rpx;
			}
		}
	}

	.button {
		width: 560rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 30rpx auto;
		font-weight: 900;
		font-size: 35rpx;
		text-align: center;
		border-radius: 15rpx;
		color: #fff;
		background: url(../../static/seach.png) center/ cover no-repeat;
	}
}

.header {
	padding: 30rpx 0 60rpx;
	text-align: center;

	.title {
		font-size: 39rpx;
		color: #fff;
	}
}

.carousel {
	margin-top: 30rpx;
	width: 600rpx;
	height: 400rpx;
	background-color: rgb(26, 32, 37);
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		display: block;
		width: 690rpx;
		height: 690rpx;
	}
}

.prize-list {
	width: 93%;
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
	height: 900rpx;
	overflow-y: auto;
	margin-bottom: 180rpx;
}

// .placeholder {
// 	width: calc(35% - 20rpx);
// 	/* 与.item的宽度相同 */
// 	margin-bottom: 20px;
// 	/* 与.item的边距相同 */
// 	visibility: hidden;
// 	/* 隐藏空白占位盒子 */
// }
.prize-item:nth-child(3n) {
	margin-right: 0;
}

.prize-item {
	width: 31%;
	// width: calc(35% - 20rpx);
	height: 355rpx;
	border-radius: 15rpx;
	overflow: hidden;
	margin-right: 20rpx;
	// margin-bottom: 30rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	background-image: url(../../static/manghe/card.png);
	background-size: contain;
	background-repeat: no-repeat;
	box-sizing: border-box;
	padding: 0 10rpx;
	position: relative;
	justify-content: space-between;
	align-items: center;

	.tip {
		position: absolute;
		background-image: url(../../static/manghe/mark.png);
		background-size: contain;
		background-repeat: no-repeat;
		width: 110rpx;
		left: 0;
		top: 0;

		text {
			color: #fff;
			font-size: 25rpx;
			font-weight: 900;
			margin-left: 15rpx;
			display: block;
		}
	}

	img {
		width: 90%;
		height: 170rpx;
		display: flex;
		margin: 0 auto 10rpx;
	}

	.price {
		text-align: center;
		color: #623ee4;
		font-size: 23rpx;
	}

	p {
		width: 130rpx;
		display: block;
		color: rgb(117, 206, 210);
		background-color: rgb(62, 69, 90);
		font-size: 18rpx;
		border-radius: 10rpx;
		padding: 5rpx;
		margin-top: 3rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.button {
		width: 160rpx;
		height: 50rpx;
		background: linear-gradient(45deg, rgb(108, 67, 255), rgb(149, 106, 255));
		color: #fff;
		font-size: 25rpx;
		border-radius: 10rpx;
		line-height: 50rpx;
	}

	text {
		font-size: 19rpx;
		color: #fff;
		margin-bottom: 10rpx;
	}
}

.action {
	width: 100%;
	height: 150rpx;
	padding: 30rpx;
	border-radius: 15rpx;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 0 30rpx;
	background: rgb(28, 29, 36);
	border-radius: 50rpx 50rpx 0 0;

	.button {
		width: 180rpx;
		height: 80rpx;
		background-repeat: no-repeat;
		background-image: url(../../static/manghe/btn.png);
		background-size: contain;
		color: #fff;
		font-weight: 900;
		font-size: 30rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.tab-bar {
	margin-top: 40rpx;
	padding: 30rpx;
	border-radius: 15rpx;
	width: 70%;
	display: flex;
	justify-content: space-between;
}

.tab {
	color: #fff;
	margin-bottom: 20rpx;
	font-weight: 900;
	font-size: 38rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	text {
		z-index: 2;
	}

	.line {
		width: 120%;
		height: 10rpx;
		background-color: #e87594;
		border-radius: 50rpx;
		margin-top: -11rpx;
		z-index: 1;
	}
}

.tab.active {
	font-weight: bold;
}

.records {
	.records-img {
		width: 260rpx;
		height: 280rpx;
		margin-top: 150rpx;
	}

	.records-text {
		margin-top: 50rpx;
		color: #fff;
		text-align: center;
	}

	.recordsItem {
		width: 680rpx;
		height: 130rpx;
		background: linear-gradient(45deg, rgb(52, 50, 54), rgb(72, 69, 94), rgb(28, 41, 57));
		border-radius: 30rpx;
		border: 1rpx solid rgb(101, 48, 217);
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 28rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 10rpx;

		.winTime {
			color: #ababab;
			margin-top: 15rpx;
			font-size: 27rpx;
		}

		.box-image-g {
			width: 90rpx;
			height: 90rpx;
			margin-right: 15rpx;
		}

		.head {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-left: 70rpx;
			margin-right: 20rpx;
		}

		.usercont {
			font-size: 24rpx;

			text {
				color: #6d6d6d;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.tip {
			position: absolute;
			background-image: url(../../static/manghe/mark.png);
			background-size: cover;
			background-repeat: no-repeat;
			width: 110rpx;
			left: 0;
			bottom: 0;

			text {
				color: #fff;
				font-size: 25rpx;
				font-weight: 900;
				margin-left: 18rpx;
				display: block;
				margin-bottom: 5rpx;
			}
		}
	}

}

.particulars {
	::v-deep &>p {
		width: 100%;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>